<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>婷婷，我好爱你呀！</title>
        <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            div{
                margin: 50px auto;
                width: 1400px;
                height: 400px;
                border:1px solid rgb(240, 174, 207);
                overflow: hidden;
            }
            ul{
                width: 10800px;
                height: 400px;
                background: darkgray;
                animation:change 80s linear 0s infinite normal;   /*动画元素，持续时间，速度，延迟时间，重复次数，是否往返*/
            }
            ul:hover{
                animation-play-state: paused;
            }
            ul:hover li{
                opacity: 0.5;   /*透明度，显示父元素颜色*/
            }
            ul li:hover{
                opacity: 1;
            }
            ul li{
                width: 300px;height: 400px;
                list-style: none;
                float: left;
                border:1px solid none;
                background-color: brown;
                box-sizing: border-box;
                }
            @keyframes change{
                from{margin-left: 0;}
                to{margin-left:-9300px ;}
            }
        </style>

        <style type="text/css">
            body{
                background-image: url("images/back.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
            }
        </style>

    </head>
    <body>
        <script src="sakura.js"></script>

        <audio id="music" autoplay="autoplay" loop="loop">
            <source src="./bgMusic.mp3" type="audio/mpeg">
        </audio>

        <p></p>
        <p align="center" style="line-height: 200%"><font color="#6699FF" size="7">和宝宝一起奔赴未来！<img border="0" src="images/2401.gif" width="60" height="51"></font><p style="line-height: 200%"></p>

        <div>
            <ul>
                <li><img src="images/1.jpeg" style="width: 300px;height: 400px;"/>1</li>
                <li><img src="images/2.jpeg" style="width: 300px;height: 400px;"/>2</li>
                <li><img src="images/3.jpeg" style="width: 300px;height: 400px;"/>3</li>
                <li><img src="images/4.jpeg" style="width: 300px;height: 400px;"/>4</li>
                <li><img src="images/5.jpeg" style="width: 300px;height: 400px;"/>5</li>
                <li><img src="images/6.jpeg" style="width: 300px;height: 400px;"/>6</li>
                <li><img src="images/7.jpeg" style="width: 300px;height: 400px;"/>7</li>
                <li><img src="images/8.jpeg" style="width: 300px;height: 400px;"/>8</li>
                <li><img src="images/9.jpeg" style="width: 300px;height: 400px;"/>9</li>
                <li><img src="images/10.jpeg" style="width: 300px;height: 400px;"/>10</li>
                <li><img src="images/11.jpeg" style="width: 300px;height: 400px;"/>11</li>
                <li><img src="images/12.jpeg" style="width: 300px;height: 400px;"/>12</li>
                <li><img src="images/13.jpeg" style="width: 300px;height: 400px;"/>13</li>
                <li><img src="images/14.jpeg" style="width: 300px;height: 400px;"/>14</li>
                <li><img src="images/15.jpeg" style="width: 300px;height: 400px;"/>15</li>
                <li><img src="images/16.jpeg" style="width: 300px;height: 400px;"/>16</li>
                <li><img src="images/17.jpeg" style="width: 300px;height: 400px;"/>17</li>
                <li><img src="images/18.jpeg" style="width: 300px;height: 400px;"/>18</li>
                <li><img src="images/19.jpeg" style="width: 300px;height: 400px;"/>19</li>
                <li><img src="images/20.jpeg" style="width: 300px;height: 400px;"/>20</li>
                <li><img src="images/21.jpeg" style="width: 300px;height: 400px;"/>21</li>
                <li><img src="images/22.jpeg" style="width: 300px;height: 400px;"/>22</li>
                <li><img src="images/23.jpeg" style="width: 300px;height: 400px;"/>23</li>
                <li><img src="images/24.jpeg" style="width: 300px;height: 400px;"/>24</li>
                <li><img src="images/25.jpeg" style="width: 300px;height: 400px;"/>25</li>
                <li><img src="images/26.jpeg" style="width: 300px;height: 400px;"/>26</li>
                <li><img src="images/27.jpeg" style="width: 300px;height: 400px;"/>27</li>
                <li><img src="images/28.jpg" style="width: 300px;height: 400px;"/>28</li>
                <li><img src="images/29.jpg" style="width: 300px;height: 400px;"/>29</li>
                <li><img src="images/30.jpg" style="width: 300px;height: 400px;"/>30</li>
                <li><img src="images/31.jpg" style="width: 300px;height: 400px;"/>31</li>
                <li><img src="images/1.jpeg" style="width: 300px;height: 400px;"/>1</li>
                <li><img src="images/2.jpeg" style="width: 300px;height: 400px;"/>2</li>
                <li><img src="images/3.jpeg" style="width: 300px;height: 400px;"/>3</li>
                <li><img src="images/4.jpeg" style="width: 300px;height: 400px;"/>4</li>
                <li><img src="images/5.jpeg" style="width: 300px;height: 400px;"/>5</li>
            </ul>
        </div>
    </body>
</html>